<template>
	<view class="myPickUpGoodsList">
		<view class="navigation">
			<image src="/static/images/collage/collage-back.png" class="collage-back" @click="back()" mode=""></image>
			<view class="navigation-title">我的提货卡</view>
		</view>
		<view class="my-pick-up-goods-card">
			<view class="my-pick-up-goods-card-title">提货卡注意事项</view>
			<view class="my-pick-up-goods-card-tips">
				使用说明：因疫情原因无法及时发货，待快递恢复后可使用提货卡进行提货
			</view>
			<view class="my-pick-up-goods-card-tips">
				注意：提货卡仅限小卖部三人团版块内使用，一张提货卡可兑换一件等额的三人团商品。
			</view>
		</view>
		<view class="card-list">
			<view class="card-list-item" v-for="(item,index) in pageItems" :key="index" @click="goDisplacesProducts(item.id)">
				<image src="/static/images/collage/pick-up-card-bg.png" class="pick-up-card-bg" mode=""></image>
				<image src="/static/images/collage/pick-up-card-icon.png" class="pick-up-card-icon" mode=""></image>
				<view class="card-list-item-part1">可提现金额(元)</view>
				<view class="card-list-item-part2">{{ item.total_amount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from "store";
	import { orderDisplaces } from 'api/collageApi'
	import Pagination from "mixins/Pagination"
	import { mapGetters,mapMutations,mapActions } from 'vuex'
	export default {
		store,
		mixins:[
			Pagination
		],
		data(){
			return {}
		},
		methods:{
			...mapMutations([
				'setDisplacesCardId'
			]),
			back(){
				uni.navigateBack({})
			},
			goDisplacesProducts(id){
				this.setDisplacesCardId(id)
				uni.navigateTo({url: '/packs/pages/displacesProducts/displacesProducts?id=' + id})
			},
			async loadPageItems() {
				return await orderDisplaces({page: this.pageNumber})
			}
		},
		async onLoad() {
			await this.loadPageData()
			this.setDisplacesCardId(null)
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #FEF5E9;
	}
	.myPickUpGoodsList{
		padding-top: 140rpx;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.collage-back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position:absolute;
		top:26rpx;
		left: 32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.my-pick-up-goods-card{
		width: 622rpx;
		height:236rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin:0 auto;
		padding: 32rpx;
	}
	.my-pick-up-goods-card-title{
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
		line-height: 40rpx;
	}
	.my-pick-up-goods-card-tips{
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		line-height: 34rpx;
		margin: 24rpx 0;
	}
	.card-list{
		margin-top: 32rpx;
		.card-list-item{
			position: relative;
			width: 686rpx;
			height: 188rpx;
			margin: 0 auto 16rpx;
			.pick-up-card-bg{
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				left:0;
				top:0;
				z-index: 0;
			}
			.pick-up-card-icon{
				display: block;
				width: 98rpx;
				height: 40rpx;
				position: absolute;
				left:28rpx;
				top:16rpx;
			}
			.card-list-item-part1{
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: center;
				opacity: 0.6;
				padding-top: 34rpx;
				position: relative;
				z-index: 2;
			}
			.card-list-item-part2{
				font-size: 64rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 74rpx;
				position: relative;
				z-index: 2;
				text-align: center;
				margin-top: 8rpx;
			}
		}
	}
	
</style>
